<div id="app" v-cloak>
<!--    <el-button type="primary" @click="iconUpdate">更新图标</el-button>-->
<!--    <el-button type="primary" @click="showIcon">查看图标</el-button>-->
    <div class="flex-row toobar">
        <el-button type="primary" @click="handleAdd" color="#626aef">添加</el-button>
        <el-button type="primary" color="#626aef" @click="ScanMenu">扫描菜单</el-button>
<!--        <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>-->
    </div>
    <el-table
            row-key="id"
            :cell-style="{height:`70px`}"
            :row-style="{height:`70px`}"
            :data="dataObj.rows"
            :height="height?height:640"
            :show-overflow-tooltip="true"
            :highlight-current-row="true"
            :tree-props="{children: 'children'}">
            style="width: 100%">
        <el-table-column
                prop="title"
                label="标题"
        >
        </el-table-column>
        <el-table-column
                prop="name"
                label="规则名称"
        >
        </el-table-column>
        <el-table-column
                prop="module"
                label="模块"
        >
        </el-table-column>
        <el-table-column
                prop="route"
                label="路由规则"
        >
        </el-table-column>
        <el-table-column
                prop="icon"
                label="图标"
        >
            <template #default="scope">
                <el-icon size="25" v-if="scope.row.icon">
                    <component :is="scope.row.icon"></component>
                </el-icon>
            </template>
        </el-table-column>
        <el-table-column
                prop="weigh"
                label="权重"
        ></el-table-column>
        <el-table-column
                prop="ismenu"
                label="是否菜单"
        >
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-switch
                            v-model="scope.row.ismenu"
                            active-text="是"
                            inactive-text="否"
                            @change="event=>changeSwitich(event,scope.row,`ismenu`)"
                            :active-value="1"
                            :inactive-value="0"
                            class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    />
                </div>
            </template>
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态"
        >
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-switch
                            v-model="scope.row.status"
                            active-text="显示"
                            inactive-text="隐藏"
                            @change="event=>changeSwitich(event,scope.row,`status`)"
                            :active-value="1"
                            :inactive-value="0"
                            class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    />
                </div>
            </template>
        </el-table-column>
        <el-table-column

                label="操作"
                fixed="right"
        >
            <template #default="scope">
                <div class="flex-row flex-content-center">
                   <el-button type="success" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
</div>